<template>
  <view class="address-edit">
    <!-- 表单 -->
    <view class="form-section">
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          class="input" 
          v-model="formData.name" 
          placeholder="请输入收货人姓名" 
        />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input 
          class="input" 
          v-model="formData.phone" 
          placeholder="请输入手机号码" 
          type="number"
          maxlength="11"
        />
      </view>
      <view class="form-item" @click="showRegionPicker">
        <text class="label">所在地区</text>
        <view class="input">
          <text v-if="formData.province">{{formData.province}} {{formData.city}} {{formData.district}}</text>
          <text v-else class="placeholder">请选择所在地区</text>
        </view>
        <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input 
          class="input" 
          v-model="formData.detail" 
          placeholder="如街道、楼牌号等" 
        />
      </view>
      <view class="form-item">
        <text class="label">设为默认地址</text>
        <switch 
          class="switch" 
          :checked="formData.isDefault" 
          @change="switchChange" 
          color="#ff2d4a"
        />
      </view>
    </view>
    
    <!-- 保存按钮 -->
    <view class="save-btn" @click="saveAddress">
      <text>保存</text>
    </view>
    
    <!-- 地区选择器 -->
    <uni-popup ref="regionPicker" type="bottom">
      <view class="region-picker">
        <view class="picker-header">
          <text class="cancel" @click="cancelRegion">取消</text>
          <text class="title">选择地区</text>
          <text class="confirm" @click="confirmRegion">确定</text>
        </view>
        <picker-view 
          class="picker-view" 
          :value="pickerValue" 
          @change="pickerChange"
        >
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in provinces" :key="index">
              {{item}}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in cities" :key="index">
              {{item}}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view class="picker-item" v-for="(item, index) in districts" :key="index">
              {{item}}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        id: 0,
        name: '',
        phone: '',
        province: '',
        city: '',
        district: '',
        detail: '',
        isDefault: false
      },
      // 地区选择器数据
      provinces: ['北京市', '上海市', '广东省', '浙江省', '江苏省'],
      cities: ['请选择'],
      districts: ['请选择'],
      pickerValue: [0, 0, 0],
      // 模拟数据
      regionData: {
        '北京市': {
          '北京市': ['东城区', '西城区', '朝阳区', '海淀区', '丰台区']
        },
        '上海市': {
          '上海市': ['黄浦区', '徐汇区', '长宁区', '静安区', '普陀区']
        },
        '广东省': {
          '广州市': ['天河区', '越秀区', '海珠区', '荔湾区', '白云区'],
          '深圳市': ['南山区', '福田区', '罗湖区', '宝安区', '龙岗区'],
          '珠海市': ['香洲区', '斗门区', '金湾区']
        },
        '浙江省': {
          '杭州市': ['上城区', '下城区', '江干区', '拱墅区', '西湖区'],
          '宁波市': ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区']
        },
        '江苏省': {
          '南京市': ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
          '苏州市': ['姑苏区', '虎丘区', '吴中区', '相城区', '吴江区']
        }
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      // 编辑模式，获取地址详情
      this.getAddressDetail(options.id)
    }
  },
  methods: {
    getAddressDetail(id) {
      // 模拟根据ID获取地址详情
      // 这里使用模拟数据
      this.formData = {
        id: 1,
        name: '张三',
        phone: '13800138000',
        province: '广东省',
        city: '深圳市',
        district: '南山区',
        detail: '科技园路1号',
        isDefault: true
      }
    },
    showRegionPicker() {
      this.$refs.regionPicker.open()
      // 初始化城市和区县数据
      this.cities = Object.keys(this.regionData[this.provinces[0]])
      this.districts = this.regionData[this.provinces[0]][this.cities[0]]
    },
    pickerChange(e) {
      const value = e.detail.value
      this.pickerValue = value
      
      if (value[0] !== undefined) {
        const province = this.provinces[value[0]]
        this.cities = Object.keys(this.regionData[province])
        
        if (value[1] !== undefined) {
          const city = this.cities[value[1]]
          this.districts = this.regionData[province][city]
        }
      }
    },
    cancelRegion() {
      this.$refs.regionPicker.close()
    },
    confirmRegion() {
      const province = this.provinces[this.pickerValue[0]]
      const city = this.cities[this.pickerValue[1]]
      const district = this.districts[this.pickerValue[2]]
      
      this.formData.province = province
      this.formData.city = city
      this.formData.district = district
      
      this.$refs.regionPicker.close()
    },
    switchChange(e) {
      this.formData.isDefault = e.detail.value
    },
    saveAddress() {
      if (!this.formData.name) {
        uni.showToast({
          title: '请输入收货人姓名',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.phone || !/^1[3-9]\d{9}$/.test(this.formData.phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.province || !this.formData.city || !this.formData.district) {
        uni.showToast({
          title: '请选择所在地区',
          icon: 'none'
        })
        return
      }
      
      if (!this.formData.detail) {
        uni.showToast({
          title: '请输入详细地址',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '保存中...'
      })
      
      // 模拟API请求
      setTimeout(() => {
        uni.hideLoading()
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }, 1000)
    }
  }
}
</script>

<style>
.address-edit {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.form-section {
  flex: 1;
  padding: 20rpx;
}
.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f1f1f1;
}
.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #333;
}
.input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.placeholder {
  color: #999;
}
.switch {
  transform: scale(0.8);
}
.save-btn {
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  font-size: 32rpx;
}
.region-picker {
  height: 600rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #f1f1f1;
}
.cancel, .confirm {
  font-size: 28rpx;
  color: #666;
}
.confirm {
  color: #ff2d4a;
}
.title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}
.picker-view {
  height: 500rpx;
}
.picker-item {
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}
</style>